<template>
  <div class="w-[98%] p-20px">
    <div style="margin-bottom: 10px">
      <el-select style="width: 130px;margin-left: 10px" v-model="filter.handleStatus"
                 placeholder="处理状态" clearable>
        <el-option v-for="item in getEnumBySn('handleStatusEnum')" :label="item.label"
                   :key="item.value"
                   :value="item.value"></el-option>
      </el-select>
      <el-select style="width: 100px;margin-left: 10px" v-model="filter.handleUser"
                 placeholder="处理人" clearable filterable>
        <el-option v-for="item in userList" :label="item.label"
                   :key="item.value" :value="item.value"></el-option>
      </el-select>
      <el-select style="width: 130px" v-model="filter.userType" placeholder="客户类型" clearable>
        <el-option v-for="item in getEnumBySn('userType')" :label="item.label"
                   :key="item.value" :value="item.value"></el-option>
      </el-select>
      <el-input style="width: 100px;margin-left: 10px" v-model="filter.customName"
                placeholder="客户姓名"></el-input>
      <el-select style="width: 80px;margin-left: 10px" v-model="filter.sex" placeholder="性别"
                 clearable>
        <el-option label="男" value="男"></el-option>
        <el-option label="女" value="女"></el-option>
      </el-select>
      <el-select style="width: 120px" v-model="filter.indexId" clearable filterable placeholder="合作编号">
        <el-option v-for="item in agencyList" :key="item.indexId" :label="item.agencyName" :value="item.indexId" />
      </el-select>
      <el-select style="width: 130px;margin-left: 10px" v-model="filter.chargeFlag"
                 placeholder="进线手机号" clearable filterable>
        <el-option v-for="item in phoneList" :label="item.label" :key="item.value"
                   :value="item.value"></el-option>
      </el-select>
      <el-input style="width: 130px;margin-left: 10px" v-model="filter.courtName"
                placeholder="法院名称"></el-input>
      <el-input style="width: 130px;margin-left: 10px" v-model="filter.freezeType"
                placeholder="冻结类型"></el-input>
      <el-input style="width: 130px;margin-left: 10px" v-model="filter.transferFlag"
                placeholder="转让"></el-input>
      <el-input style="width: 130px;margin-left: 10px" v-model="filter.handlePlatform"
                placeholder="处理平台"></el-input>

      <el-input style="width: 130px;margin-left: 10px" v-model="filter.letterFlag"
                placeholder="是否写信"></el-input>
      <el-button style="margin-left: 10px" type="primary" @click="fetchData">查询</el-button>
      <el-button style="margin-left: 10px" type="success" @click="addHandle">新增</el-button>
    </div>


    <el-table :data="tableData" style="width: 100%" border stripe height="800px">
      <el-table-column label="序号" width="60" align="center">
        <template #default="{ $index }">
          {{ $index + 1 }} <!-- 使用 $index 计算序号 -->
        </template>
      </el-table-column>
      <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop"
                       :label="column.label"
                       show-overflow-tooltip
                       :width="column.width" :align="column.align"></el-table-column>
      <el-table-column label="操作" width="240" fixed="right">
        <template v-slot="scope">
          <el-button @click="editHandle(scope.row)" size="mini" type="primary">编辑</el-button>
          <el-button @click="materialHandle(scope.row)" size="mini" type="success">资料</el-button>
          <el-button @click="deleteHandle(scope.row)" size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination :current-page="currentPage" :page-size="pageSize" :total="totalItems"
                   @current-change="currentChange"
                   background layout="total,prev, pager, next" class="pagination" prev-text="上一页"
                   next-text="下一页"></el-pagination>
    <Modal ref="modalRef" @ok="okHandle"/>
    <CreditCardModal ref="creditCardModalRef"/>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import Modal from "./modal.vue"
import {getEnumBySn, getPhoneList, getUserList} from "@/api/enums";
import request from '@/config/axios'
import CreditCardModal from "./material.vue";
import {} from "@/router/modules/remaining";
import {ElMessage} from "element-plus";

const filter = ref({
  gender: '',
  trusteeshipType: ""
});
const modalRef = ref();
const tableData = ref([{}])
const agencyList = ref([]);
const userList  = ref([])

getUserList().then(res => {
  userList.value = res
})

const columns = ref([
  {prop: 'userType', label: '客户类型', width: '100', align: 'center'},
  {prop: 'handleUser', label: '处理人', width: '100', align: 'center'},
  {prop: 'receiveDate', label: '接单日期', width: '100', align: 'center'},
  {prop: 'handleStatus', label: '处理状态', width: '100', align: 'center'},
  {prop: 'indexId', label: '合作编号', width: '100', align: 'center'},
  {prop: 'customName', label: '客户姓名', width: '120', align: 'center'},
  {prop: 'sex', label: '性别', width: '100', align: 'center'},
  {prop: 'reservePhone', label: '预留手机号', width: '120', align: 'center'},
  {prop: 'handlePlatform', label: '处理平台', width: '100', align: 'center'},
  {prop: 'freezeType', label: '冻结类型', width: '100', align: 'center'},
  {prop: 'applyTime', label: '申请时间', width: '120', align: 'center'},
  {prop: 'mailDate', label: '邮寄时间', width: "120", align: 'center'},
  {prop: 'handelProcess', label: '最新处理情况', width: "120", align: 'center'},
  {prop: 'lastHandleTime', label: '最后处理时间', width: "120", align: 'center'},
  {prop: 'promptMode', label: '提示方式', width: '120', align: 'center'},
  {prop: 'transferFlag', label: '是否转让', width: '100', align: 'center'},
  {prop: 'caseNo', label: '案号', width: '180', align: 'center'},
  {prop: 'applyUser', label: '申请人',width: '160' ,align: 'center'},
  {prop: 'courtName', label: '法院名称', width: "160", align: 'center'},
  {prop: 'countPhone', label: '法院电话', width: "120", align: 'center'},
  {prop: 'receiveUser', label: '收件人', width: "120",align: 'center'},
  {prop: 'letterFlag', label: '是否写信', width: "120", align: 'center'},
  {prop: 'chargeFlag', label: '群名手机号', width: '100', align: 'center'},
  {prop: 'comePhone', label: '进线手机号', width: '100', align: 'center'},
  {prop: 'lastHandleUser', label: '最后处理人', width: "120", align: 'center'},

]);

const totalItems = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);
const currentItem = ref({});
const creditCardModalRef = ref();
const phoneList = ref([])

fetchData()
const currentChange = (v) => {
  currentPage.value = v
  fetchData()
}

async function fetchData() {
  const response = await request.get({
    url: '/thawInfo/list',
    params: {...filter.value, current: currentPage.value}
  })
  tableData.value = response.records
  totalItems.value = response.total
  currentPage.value = response.current
}

const okHandle = () => {
  fetchData()
}

const addHandle = () => {
  modalRef.value?.add()
}
const editHandle = (rowData) => {
  modalRef.value?.edit(rowData)
  currentItem.value = rowData
}

const materialHandle = (rowData) => {
  creditCardModalRef.value?.open(rowData)
}

const deleteHandle = (rowData) => {
  ElMessageBox.confirm('真的要删除吗！', {
    confirmButtonText: 'OK',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      request.delete({
        url: '/thawInfo/deleteById',
        params: { id: rowData.id }
      }).then(() => {
        fetchData()
      })
      ElMessage.success('删除成功')
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消退出',
      });
    });
}

const initOption = function () {
  request.get({
    url: '/agency/list',
  }).then(res => {
    agencyList.value = res
  })
}

//页面挂载
onMounted(() => {
  getPhoneList().then(res => {
    phoneList.value = res
  })
  fetchData()
  initOption()
});
</script>

<style scoped>
.filter-section {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.filter-section > * {
  margin-right: 10px;
}

.pagination {
  margin-top: 20px;
  float: right;
  font-size: 22px;
}

.drawer-footer {
  text-align: right;
  margin-top: 20px;
}

.form-inline {
  display: flex;
  flex-wrap: wrap;
}

.form-inline .el-form-item {
  margin-right: 20px;
}
</style>
